<!DOCTYPE HTML>
<html>
	<head>
		<title>please enter your title</title>
		<meta charset="utf-8">
		<meta name="Author" content="潭州学院-阿飞老师">
		<style type='text/css'>
			*{ margin:0; padding:0;}
			#banner{
				width:520px;
				height:280px;
				margin:20px auto;
				border:1px solid red;
				position:relative;
			}
			#banner .pic{
				width:100%;
				height:100%;
				overflow:hidden;
			}
			li{
				list-style:none;
			}
			#banner .pic ul{
				width:1000%;
				overflow:hidden;
				margin-left:-520px;
			}
			#banner .pic ul li{
				float:left;
			}

			#banner .tab{
				width:70px;
				height:14px;
				background:#fff;
				background:rgba(255,255,255,0.5);
				position:absolute;
				left:50%;
				margin-left:-35px;
				bottom:10px;
				border-radius:7px;
			}
			#banner .tab ul li{
				width:10px;
				height:10px;
				border-radius:100%;
				background:#999;
				float:left;
				margin:2px 2px;
				cursor:pointer;
			}
			#banner .tab ul li.on{
				background:#f60;
			}
			#banner .btn{
				display:none;
			}
			#banner .btn div{
				width:40px;
				height:40px;
				background:#000;
				background:rgba(0,0,0,0.3);
				color:#fff;
				font-size:26px;
				font-weight:bold;
				text-align:center;
				line-height:40px;
				cursor:pointer;
				position:absolute;
				top:50%;
				margin-top:-20px;
			}
			#leftBtn{
				left:5px;
			}
			#rightBtn{
				right:5px;
			}
			#banner .btn div.hover{
				background:rgba(0,0,0,0.6)
			}

		</style>
	</head>
	<body>
		
		<div id="banner">
			
			<div class="pic">
				<ul>
					<li><a href=""><img src="img/5.jpg" /></a></li>
					<li><a href=""><img src="img/1.jpg" /></a></li>
					<li><a href=""><img src="img/2.jpg" /></a></li>
					<li><a href=""><img src="img/3.jpg" /></a></li>
					<li><a href=""><img src="img/4.jpg" /></a></li>
					<li><a href=""><img src="img/5.jpg" /></a></li>
					<li><a href=""><img src="img/1.jpg" /></a></li>
				</ul>
			</div>

			<div class="tab">
				<ul>
					<li class="on"></li><li></li><li></li><li></li><li></li>
				</ul>
			</div>

			<div class="btn">
				<div id="leftBtn">&lt;</div>
				<div id="rightBtn">&gt;</div>
			</div>

		</div>

		<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				var $tabLi = $('#banner .tab li');
				var $picUl = $('#banner .pic ul');
				var $banner = $('#banner');
				var $btn = $('#banner .btn');
				var $btnDiv = $('#banner .btn div');
				var imgWidth = $('#banner .pic li').width();
				var index = 0;
				var nowTime = new Date();

				$tabLi.click(function(){
					index = $(this).index();
					$(this).addClass('on').siblings().removeClass('on');
					$picUl.animate({
						marginLeft : -imgWidth*(index+1) + 'px'
					},300);
				});

				$banner.hover(function(){
					$btn.show();
					clearInterval(timer);
				},function(){
					$btn.hide();
					timer = setInterval(function(){
						index ++;
						fn();
					},5000);
				});

				$btnDiv.hover(function(){
					$(this).addClass('hover');
				},function(){
					$(this).removeClass('hover');
				}).click(function(){
					if ( new Date() - nowTime > 350 )
					{
						nowTime = new Date();
						var i = $(this).index();
						i?index++:index--;
						fn();
					}
				}).mousedown(function(){
					return false;
				});

				var timer = setInterval(function(){
					index ++;
					fn();
				},5000);

				function fn(){
					var liIndex = index;
					if ( liIndex >= $tabLi.length )
					{
						liIndex = 0;
					}
					else if ( liIndex < 0 )
					{
						liIndex = $tabLi.length-1;
					}
					$tabLi.eq(liIndex).addClass('on').siblings().removeClass('on');
					$picUl.animate({
						marginLeft : -imgWidth*(index+1) + 'px'
					},300,function(){
						if ( index == $tabLi.length )
						{
							$picUl.css('marginLeft' , -imgWidth+'px');
							index = 0;
						}
						else if ( index < 0 )
						{
							$picUl.css('marginLeft' , -imgWidth*($tabLi.length)+'px');
							index = $tabLi.length-1;
						}
					});
				}

			});
		</script>
	</body>
</html>